<template>
  <div class="wrap">
    <div class="ech-title">
      <p>对比前日数据</p>
      <ul>
        <li>
          <img src="@/assets/img/nav1.png" alt />
          <span>昨日数据</span>
        </li>
        <li>
          <img src="@/assets/img/nav2.png" alt />
          <span>今日数据</span>
        </li>
      </ul>
    </div>
    <div id="ech_4"></div>
  </div>
</template>
<script>
export default {
  props: {
    dazh: {
      type: null,
      default: {}
    }
  },
  methods: {
    draw() {
      let myChart = this.$echarts.init(document.getElementById("ech_4"));
      var labelRight = {
        normal: {
          position: "center"
        }
      };
      var option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["订单数", Number(this.dazh.orderCountList[0]),Number(this.dazh.orderCountList[1])],
            ["充值金额",Number(this.dazh.rechargeAmountList[0]),Number(this.dazh.rechargeAmountList[1])],
            ["销售额", Number(this.dazh.orderAmountList[0]),Number(this.dazh.orderAmountList[1])]
          ]
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          }
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#615AD1"
            }
          },
          {
            type: "bar",
            itemStyle: {
              color: "#F3AE6E"
            }
          }
        ]
      };

      myChart.setOption(option);
    }
  },
  mounted() {},
  watch: {
    dazh() {
      this.draw();
    }
  }
};
</script>
<style lang="scss" scoped>
#ech_4 {
  width: 100%;
  height: 400px;
}
.wrap {
  background: #fff;
  height: 480px;
}
.ech-title {
  overflow: hidden;
  padding-top: 15px;
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
  p {
    color: #555;
    font-size: 18px;
  }
  ul {
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
    li {
      display: flex;
      align-items: center;
      margin: 0 10px;
      span {
        margin-left: 10px;
        color: #555;
      }
    }
  }
}
</style>